<template>
  <div class="channel-page">
    <!--banner-->
    <div class="channel-page-swiper">
      <swiperBanner v-if="channelData" :swiperList="channelData.rotate"></swiperBanner>
    </div>
    <!--跟团专题-->
    <div class="channel-page-advertisement">
      <ul class="advertisement-list" v-if="channelData">
        <li class="advertisement-item le"><a href="javascript:;"><img src="../../assets/img/channelPage/img1.png" alt=""></a></li>
        <li class="advertisement-item ri"><a href="javascript:;"><img src="../../assets/img/channelPage/img2.png" alt=""></a></li>
        <li class="advertisement-item b-le"><a href="javascript:;"><img src="../../assets/img/channelPage/img3.png" alt=""></a></li>
        <li class="advertisement-item b-ri"><a href="javascript:;"><img src="../../assets/img/channelPage/img4.png" alt=""></a></li>
      </ul>
    </div>
    <!--热门目的地-->
    <div class="channel-page-hotplace" v-if="channelData">
      <div class="hotplace-title"><span class="line"></span>
        <p class="hotplace-text">热门目的地</p><span class="line"></span>
      </div>
      <ul class="hotplace-list gzl-grid__box">
        <li class="hotplace-item gzl-grid__item" v-for="(item, index) in channelData.dest" :key="index"><a href="javascript:;">
          <p>{{item.title}}</p></a></li>
      </ul>
    </div>
    <div class="channel-page-classify">
      <ul class="classify-list">
        <li class="classify-item"><a href="javascript:;"><img src="../../assets/img/channelPage/img5.png" alt=""></a></li>
        <li class="classify-item"><a href="javascript:;"><img src="../../assets/img/channelPage/img6.png" alt=""></a></li>
        <li class="classify-item"><a href="javascript:;"><img src="../../assets/img/channelPage/img7.png" alt=""></a></li>
        <li class="classify-item"><a href="javascript:;"><img src="../../assets/img/channelPage/img8.png" alt=""></a></li>
      </ul>
    </div>
    <div :class="['channel-page-nav', {'float':navBarFixed}]" ref="channelNav" v-if="channelData">
      <div class="nav-box">
        <ul class="gzl-navbar">
          <li :class="['gzl-navbar__item', {'active':index===0}]" v-for="(item, index) in channelData.tabList" :key="index">{{item.title}}</li>
        </ul>
      </div>
    </div>
    <div class="channel-page-type" v-if="channelData">
      <ul class="channel-page-list">
        <li class="list-item" v-for="(list, index) in channelData.recommend" :key="index"><a href="javascript:;"><img :src="list.imageStr" alt="">
          <div class="prod-name">{{list.pdName}}</div>
          <ul class="prod-tag-list">
            <li class="prod-tag-item" v-for="(tag, index) in list.prductTagList" :key="index">{{tag}}</li>
          </ul>
          <div class="prod-price"><span>￥</span>{{list.price}}</div>
          <div class="prod-count">{{list.num}}人出游</div></a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'channelPage',
  data () {
    return {
      channelType: null,
      navBarFixed: false,
      channelData: null
    }
  },
  created () {
    let self = this
    self.channelType = self.$route.params.type
    console.log('test2', this.$api.test2())
    self.$api.getChannelData(self.channelType).then(res => {
      self.channelData = res.data
      console.log(self.channelData)
    })
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = this.$refs.channelNav.offsetTop
      if (scrollTop > offsetTop) {
        this.navBarFixed = true
      } else {
        this.navBarFixed = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../assets/css/channelPage/channelPage.scss";
  .channel-page-nav {
    &.float {
      padding-top: px(50);
      .nav-box {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1;
      }
    }
  }
</style>
